<template>
  <div class="app-container menu-manage">
    <!-- 搜索 -->
    <el-form :model="state.queryParams" ref="queryRef" :inline="true">
      <el-form-item label="权限备注" prop="remark">
        <el-input v-model="state.queryParams.remark" placeholder="请输入权限备注" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="菜单ID" prop="menu_id">
        <el-input v-model="state.queryParams.menu_id" placeholder="请输入菜单ID" clearable @keyup.enter="handleQuery" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="Plus" plain @click="menuEditRef.openDialog()">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      stripe
      border
      v-loading="state.tableLoading"
      :data="state.tableData"
      :default-expand-all="true"
      row-key="menu_id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      style="flex: 1"
    >
      <el-table-column prop="menu_id" label="菜单ID" width="140"></el-table-column>
      <el-table-column align="center" prop="remark" label="权限备注" width="200"></el-table-column>
      <el-table-column align="center" prop="menu_type" label="类型" width="100">
        <template #default="scope">
          <span>{{ transDict(dictsData[0], scope.row[scope.column.property]) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="icon" label="图标" width="100">
        <template #default="scope">
          <svg-icon :icon-class="scope.row[scope.column.property] ? scope.row[scope.column.property] : ''" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="visible" label="菜单显示" width="100">
        <template #default="scope">
          <span>{{ Boolean(scope.row[scope.column.property]) ? '隐藏' : '显示' }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        align="center"
        prop="menu_key"
        label="路由唯一键"
        min-width="180"
      ></el-table-column> -->
      <el-table-column align="center" prop="component" label="组件路径" :show-overflow-tooltip="true" min-width="180"></el-table-column>
      <el-table-column align="center" prop="menu_name" label="菜单名称" :show-overflow-tooltip="true" min-width="200"></el-table-column>
      <el-table-column align="center" prop="api_parameter" label="落库" :show-overflow-tooltip="true" min-width="300">
        <template #default="scope">
          <span>{{ scope.row[scope.column.property] ? scope.row[scope.column.property].split('entityname=')[1] : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="order_num" label="排序" sortable width="100"></el-table-column>
      <el-table-column align="center" prop="no_cache" label="是否缓存" width="100">
        <template #default="scope">
          <span>{{ Boolean(scope.row[scope.column.property]) ? '否' : '是' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" :width="fitWidth" class-name="small-padding fixed-width" fixed="right">
        <template #default="scope">
          <div class="operation-box">
            <el-text class="operate-btn-item" type="primary" @click="menuEditRef.openDialog(scope.row)">编辑</el-text>
            <el-text class="operate-btn-item" type="primary" @click="handleMenuDel(scope)">删除</el-text>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <Suspense>
      <MenuEdit width="65%" ref="menuEditRef" @refresh="handleQuery" />
    </Suspense>
  </div>
</template>

<script setup name="Menu">
import useSystemManageStore from '@store/modules/systemManage'
import {reformateMenuData, buildTreeData} from '@/utils/routerUtil'
import MenuEdit from './components/MenuEdit/index.vue'
import useFitColumn from '@/hooks/useFitColumn'
import _ from 'lodash'
import {transDict} from '@/utils'

const {proxy} = getCurrentInstance()
const systemManageStore = useSystemManageStore()
const {fitWidth} = useFitColumn()

const state = reactive({
  tableLoading: true,
  tableData: [],
  queryParams: {
    menu_name: '',
    menu_id: ''
  }
})
const dictsData = ref(proxy.useDict('权限类型'))
const menuTree = ref([])
const menuEditRef = ref(null)

/** 查询菜单列表 */
const getList = async (query) => {
  state.tableLoading = true
  const {Total, Data} = await systemManageStore.menuLoad(query)

  const menuData = reformateMenuData(Data)
  state.tableData = buildTreeData(menuData, 'menu_id')

  // 树形结构数据
  let menuTreeData = _.cloneDeep(state.tableData)
  menuTreeData.unshift({
    menu_id: 0,
    menu_name: '顶级目录',
    remark: '顶级目录',
    children: []
  })
  menuTree.value = menuTreeData
  state.tableLoading = false
}

const handleQuery = () => {
  getList(state.queryParams)
}

const handleMenuDel = async (scope) => {
  try {
    // await proxy.$modal.confirm("请问确认删除吗？");
    await systemManageStore.menuDel({menu_id: scope.row.menu_id})
    proxy.$modal.msgSuccess('删除成功！')
    handleQuery()
  } catch (error) {
    console.log(error, 'error')
  }
}

provide('menuTree', readonly(menuTree)) //提供给【新增&编辑】的树形组件使用

onMounted(() => {
  handleQuery()
})
</script>
